<template>
  <el-scrollbar class="myScroll" height="100vh" @scroll="v => {scrollTop = v.scrollTop}">
    <el-container class="studentPage">
      <el-header class="pageHeader">
        <el-row class="headRow">
          <el-col class="titleCol" :span="16">
            <div class="breadCrumb">
              <span>教务管理系统</span>&nbsp;
              <i class="el-icon-arrow-right"></i>&nbsp;
              <span style="font-weight: bold;color: #303133">学生端</span>
            </div>
          </el-col>
          <el-col class="userCol" :span="8">
            <el-dropdown @visible-change="(v) => { accountOptionArrow = v }">
              <div class="userContent">
                <el-avatar :size="32" class="userIcon">{{userInfo.sname[0]}}</el-avatar>
                <span>{{`${userInfo.sname}(${accountValue})`}}</span>
                <i class="el-icon-arrow-up" :style="accountOptionArrowStyle"></i>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="el-icon-user-solid" class="accountOption" @click="Router.replace('/studentProfile')">个人信息</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-setting" class="accountOption">修改密码</el-dropdown-item>
                  <el-dropdown-item :divided="true" icon="el-icon-back" class="accountOption" @click="Exit">退出登陆</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside class="stuHubContent">
          <student-hub
          :scroll-top="scrollTop"
          :account-state="loginState"
          :account="accountValue"
          :student-info="userInfo"
          ></student-hub>
        </el-aside>
        <el-main class="stuHandleArea">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-scrollbar>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { computed, ref } from 'vue'
import studentHub from '@/components/studentPage/studentHub.vue'
import emptyStudentInfo from '@/assets/PublicStaticValue/views/studentPage/emptyStudentInfo'
import teacherInfo from '@/assets/PublicInterface/StoreInterfaces/CurrentAccount/teacherInfo'
import studentInfo from '@/assets/PublicInterface/StoreInterfaces/CurrentAccount/studentInfo'
import loginPack from '@/assets/PublicInterface/StoreInterfaces/CurrentAccount/loginPack'
export default {
  name: 'studentPage',
  components: {
    studentHub
  },
  setup () {
    const Store = useStore()
    const Router = useRouter()
    if (!Store.getters['CurrentAccount/getAccountState'].Login) {
      Router.replace('/')
    }
    const scrollTop = ref(0)
    const loginState = computed(() => Store.getters['CurrentAccount/getAccountState'])
    const accountValue = computed(() => Store.getters['CurrentAccount/getCurrentAccount'])
    const userInfo = computed(() => Store.getters['CurrentAccount/getCurrentInfo'])
    const accountOptionArrow = ref(false)
    const accountOptionArrowStyle = computed(() => {
      return {
        transform: `rotate(${accountOptionArrow.value ? '180deg' : '0deg'})`
      }
    })
    function Exit () {
      Store.dispatch('CurrentAccount/logout')
      Router.replace('/')
    }
    return {
      Store, loginState, userInfo, accountValue, accountOptionArrow, accountOptionArrowStyle, scrollTop, Router, Exit
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/PublicStaticValue/ClientSize/clientSize";
@import "../assets/Fonts/FontMap/FontMap";
@import "../assets/Fonts/FontMap/FontList.css";
.myScroll{
  display: flex;
  justify-content: center;
}
.studentPage{
  width: 100vw;
  max-width: $screen_lg;
  min-width: $screen_sm;
  .pageHeader{
    display: flex;
    justify-content: center;
    .headRow{
      display: flex;
      align-items: center;
      width: 100%;
      .titleCol{
        display: flex;
        align-items: center;
        .breadCrumb{
          display: flex;
          align-items: center;
          font-size: 20px;
          color: #909399;
          cursor: default;
          font-family: $SH_Serif_Regular;
          *{
            display: flex;
            align-items: center;
            line-height: 0;
          }
          i{
            transform: translateY(1.5px);
          }
        }
      }
    }
  }
}
.userCol{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.userContent{
  cursor: pointer;
   display: flex;
   align-items: center;
   height: fit-content;
   width: fit-content;
   .userIcon{
     font-family: $Mi_Lan;
     font-size: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
   }
   span{
     font-family: $SH_Serif_Regular;
     font-size: 16px;
     line-height: 0;
     margin-left: 15px;
   }
  i{
    font-size: 16px;
    color: #C0C4CC;
    font-weight: bold;
    line-height: 0;
    margin-left: 10px;
    transition: 0.3s;
  }
 }
.accountOption{
  font-family: $SH_Serif_Regular;
}
.stuHubContent{
  padding-top: 10px;
  padding-left: 10px;
  width: 330px;
  display: flex;
  justify-content: center;
}
.stuHandleArea{
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 30px;
}
</style>
